跳至主要内容

幹訓3

信息

原始 MD by 炳章

Let's connect our project to​

Benson

Who am I?​

Something about me...​

  • 曾炳章 🧑

  • Benson

  • Frontend developer & web designer 💻

  • Learing backend & database 👨‍💻

  • The director of pop dance club 🕺

Something I want 2 tell...​

  • Great oaks from little acorns grow 🌳

  • Don't lose your curiosity & always exploring 🔎

  • Working harder and harder and harder.... 🔥

⭐Always remeber:

==GOOD THING TAKE TIME :)==

what is API?​

Application Programming Interfaces(APIs)​

They abstract more complex code away from you, providing some easier syntax to use in its place. NOTE:

  • 應用程式介面 應用程式介面是指電腦作業系統或程式函式庫提供給應用程式呼叫使用的程式碼，其主要目的是讓應用程式開發人員得以呼叫一組常式功能，而無須考慮其底層的原始碼為何、或理解其內部工作機制的細節。API 本身是抽象的，它僅定義了一個介面，而不涉及應用程式在實作過程中的具體操作。
  • 舉例(前後端分離, 不需要去動資料庫

still can't understand?​

let's watch some introduction video​

{%youtube zvKadd9Cflc%}

How to Use an API?​

the ways can make request on server​

  • HTTP

  • text formate(XML, JSON)

4 common HTTP methods​

  • GET

  • POST

  • PUT

  • DELETE

today we'll only use the GET method.​

JSON​

JavaScript Object Notation​

The most common formats found in modern APIs NOTE:JSON 是一種由道格拉斯·克羅克福特構想和設計、輕量級的資料交換語言，該語言以易於讓人閱讀的文字為基礎，用來傳輸由屬性值或者序列性的值組成的資料物件。儘管 JSON 是 JavaScript 的一個子集，但 JSON 是獨立於語言的文字格式，並且採用了類似於 C 語言家族的一些習慣。

JSON 資料格式與語言無關。即便它源自 JavaScript，但目前很多程式語言都支援 JSON 格式資料的生成和解析。JSON 的官方 MIME 類型是 application/json，副檔名是 .json。

JSON advantages​

  • Less Verbose

  • Readable

  • High compatibility

JSON formate​

JSON example​

{
  "crust": "original",
  "toppings": ["cheese", "pepperoni", "garlic"],
  "status": "cooking",
  "customer": {
    "name": "Brian",
    "phone": "573-111-1111"
  }
}

JSON formatter​

the tool u must need when reading JSON https://jsoneditoronline.org/

input some JSON & tap "copy>"​

trust you guys must understand somehow,​

so let's jump right into todays implementation​

😜😜

following is the API we will use today :D​

https://pokeapi.co/api/v2/pokemon/

STEP 1​

choose a pokemon u like the most & search its english name from google. (I use eevee as example) ![](https://i.imgur.com/yeIIBf7.jpg =300x300)

STEP 2​

put your pokemon name at the bottom of the API link

here comes the info of the pokemon!​

Get dizzy with the messy & massive data?​

STEP 3​

use JSON formatter to fomate it.

Challenge time!​

the keys we will use today​

  • ID
  • type
  • weight
  • height
  • hp
  • attack
  • defense

find the relative key & value in JSON text!​

How to use JSON in JS?​

![](https://i.imgur.com/jJ7P6MY.png =200x200)

there's two ways​

  • Dot notation

  • Bracket notation

✔️ Dot Notation 🏆

  • It’s a lot easier to read

  • It’s way faster to type.

❌ Dot Notation limitation:

  1. Issue working with Identifiers

  2. Issue working with Variables

Working with Identifiers​

const obj = {

  123: 'digit',

  123name: 'start with digit',

  name123: 'does not start with digit',

  $name: '$ sign',

  name-123: 'hyphen',

  NAME: 'upper case',

  name: 'lower case'

};

In Dot Notation​

obj.123;      // ❌ SyntaxError

obj.123name;  // ❌ SyntaxError

obj.name123;  // ✅ 'does not start with digit'

obj.$name;    // ✅  '$ sign'

obj.name-123;  // ❌ SyntaxError

obj.'name-123';// ❌ SyntaxError

obj.NAME; // ✅ 'upper case'

obj.name; // ✅ 'lower case'

In Bracket Notation​

obj['123'];     // ✅ 'digit'

obj['123name']; // ✅ 'start with digit'

obj['name123']; // ✅ 'does not start with digit'

obj['$name'];   // ✅ '$ sign'

obj['name-123']; // ✅ 'does not start with digit'

obj['NAME']; // ✅ 'upper case'

obj['name']; // ✅ 'lower case'

Accessing Property with Variables​

const variable = 'name';

const obj = {
  name: 'value'
};

// Bracket Notation

obj[variable]; // ✅ 'value'


// Dot Notation

obj.variable; // undefined

Quiz Time!​

const variable = 'name';

const obj = {

  name: 'value',

  variable: '👻'

};

what is the value of following syntax ?​

obj[variable] = ?
obj.variable = ?

ANS​

const variable = 'name';

const obj = {
  name: 'value',
  variable: '👻'
};

// Bracket Notation

obj[variable]; // ✅ 'value'

// Dot Notation

obj.variable; // '👻'

In next chapter, we'll move back to Vue instruction​

the tool we'll need to use in Vue.js​

  • Vue.js methods & Event Handling

  • axios

  • async/await

Vue.js methods & Event Handling​

  • in template
<div id="example">

  <button v-on:click="greet">Greet</button>

</div>
  • in script
methods: {
    greet(event) {

      // `this` inside methods point to the Vue instance
      alert('Hello ' + this.name + '!')

      // `event` is the native DOM event
      alert(event.target.tagName)

    }
  }

axios​

Promise based HTTP client for the browser and node.js

async / await​

NOTE:同步模式下，每個任務必須按照順序執行，後面的任務必須等待前面的任務執行完成，非同步模式則相反，後面的任務不用等前面的，各自執行各自的任務,await 顧名思義就是「等待」，它會確保一個 promise 物件都解決 ( resolve ) 或出錯 ( reject ) 後才會進行下一步，當 async function 的內容全都結束後，會返回一個 promise，這表示後方可以使用.then 語法來做連接

function yayOrNay() {
  return new Promise((resolve, reject) => {
    const val = Math.round(Math.random() * 1); // 0 or 1
    val ? resolve('Lucky!!') : reject('Nope 😠');
  });
}

async function msg() {
  try {
    const msg = await yayOrNay();
    console.log(msg);
  } catch(err) {
    console.log(err);
  }
}

End of the basic instruction!​

you're ready to finish the project :D​

first, open your nuxt project​

STEP 1​

type in the "methods" in script

methods:{


}

STEP 2​

create your function

methods:{

    async search(){


    }

}

STEP 3​

type in the following code

methods:{

    async search() {

      const poke = this.pokemon.toLowerCase()
      this.res = await this.$axios.$get(
        `https://pokeapi.co/api/v2/pokemon/${poke}`
      )
      this.pic = `https://pokeres.bastionbot.org/images/pokemon/${this.res.id}.png`
      this.test = true

    }

}

NOTE:description the code.

STEP 4​

run the code

$ yarn dev

finish!​

![](https://i.imgur.com/uqHOUUv.png =600x500)

THX for listenling!​

hope u guys still sober ..

btw...